<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Grid 布局示例</title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
	<h1>Grid 布局示例</h1>
	<h2>容器的属性</h2>
	<h3>1、display属性</h3>
	<p>grid 属性 产生一个块级的网格</p>
	<p>
		.box {
        display: grid | inline-grid
    }
	</p>
  <h3>2、grid-template-columns属性</h3>
  <p>利用以空格分隔的值定义网格的列和行。值的大小代表轨道的大小，并且它们之间的空格表示网格线。</p>
  <p>num可以一个长度、百分比或者是网格中自由空间的一小部分(使用fr单位)</p>
  <p>"line-name": 你选择的任意名称</p>
  <p>
    .box{
    grid-template-columns: num ... | line-name ... ;
    grid-template-rows:num ... | line-name ... ;
    }
  </p>
  <p>num（数字）</p>
  <div class="box box-1">
    <div class="box-item">1</div>
    <div class="box-item">2</div>
    <div class="box-item">3</div>
    <div class="box-item">4</div>
  </div>
	<h3>2、grid-template-rows属性</h3>
	<p>利用以空格分隔的值定义网格的列和行。值的大小代表轨道的大小，并且它们之间的空格表示网格线。</p>
  <p>num可以一个长度、百分比或者是网格中自由空间的一小部分(使用fr单位)</p>
  <p>"line-name": 你选择的任意名称</p>
	<p>
		.box{
      grid-template-columns: num ... | line-name ... ;
      grid-template-rows:num ... | line-name ... ;
		}
	</p>
	<p>fr（等分比）</p>
	<div class="box box-2">
		<div class="box-item">1</div>
		<div class="box-item">2</div>
		<div class="box-item">3</div>
		<div class="box-item">4</div>
		<div class="box-item">5</div>
		<div class="box-item">6</div>
		<div class="box-item">7</div>
	</div>
	<p>宽高重复的部分，你可以使用 repeat() 表示法进行精简</p>
	<div class="box box-3">
		<div class="box-item">1</div>
		<div class="box-item">2</div>
		<div class="box-item">3</div>
		<div class="box-item">4</div>
		<div class="box-item">5</div>
		<div class="box-item">6</div>
		<div class="box-item">7</div>
	</div>
	<h3>3、grid-template-areas定义网格区域名称，从而定义网格模板</h3>
	<p>grid-area-name: 使用grid-area属性定义网格区域名称
    . : 句点表示一个空单元格
    none: 无网格区域被定义</p>
	<p>
		.box {
      grid-template-areas: "header header header header"
                           "main main . sidebar"
                           "footer footer footer footer"
		}
	</p>
	<div class="box box-4">
		<div class="box-item box-item-a">header</div>
		<div class="box-item box-item-b">main</div>
		<div class="box-item box-item-c">slidebar</div>
		<div class="box-item box-item-d">footer</div>
	</div>

	<h3>4、grid-column-gap和grid-row-gap属性</h3>
	<p>指定网格线的大小。你可以把它想像成在行/列之间设置间距宽度</p>
  <p>属性值“line-size”: 一个长度值</p>
	<p>
		.box {
    grid-template-columns: 100px 50px 100px;
    grid-template-rows: 80px auto 80px;
    grid-column-gap: 10px;
    grid-row-gap: 15px;
		}
	</p>
	<p>间距仅仅在列/行之间产生，而不会在边缘区。</p>
  <p>grid-gap=>grid-column-gap 和 grid-row-gap的简写值,单位：长度值</p>
	<div class="box box-5">
		<div class="box-item">1</div>
		<div class="box-item">2</div>
		<div class="box-item">3</div>
		<div class="box-item">4</div>
    <div class="box-item">5</div>
    <div class="box-item">6</div>
    <div class="box-item">7</div>
    <div class="box-item">8</div>
    <div class="box-item">9</div>
	</div>
  <h3>5、justify-items/align-items</h3>
	<p>沿 "列轴对齐网格"/"行轴对齐网格"项中的内容(相反于align-item属性定义的沿行轴对齐)。此值适用于容器内所有的网格项</p>
	<p>属性值:
    <Br/>
    start: 内容与网格区域的左端对齐
    <Br/>
    end: 内容与网格区域的右端对齐
    <Br/>
    center: 内容处于网格区域的中间位置
    <Br/>
    stretch: 内容宽度占据整个网格区域空间(默认值)</p>
  <p>
    .box {
      justify-items: start | end | center | stretch;
    }
  </p>
  <p>start： 左端对齐 效果如图</p>
  <div class="box box-6">
		<div class="box-item-6">
      <img src="../img/start.PNG" alt="">
    </div>
	</div>
	<p>end： 右端对齐，效果如图</p>
	<div class="box box-7">
		<div class="box-item-6">
      <img src="../img/end.PNG" alt="">
    </div>
	</div>
	<p>center：中间位置，效果如图</p>
	<div class="box box-8">
		<div class="box-item-6">
      <img src="../img/center.PNG" alt="">
    </div>
	</div>
  <p>center：内容宽度占据整个网格区域空间(默认值)，效果如图</p>
  <div class="box box-9">
    <div class="box-item-6">
      <img src="../img/stretch.PNG" alt="">
    </div>
  </div>
	<h3>5、justify-content/align-content属性</h3>
	<p>当你使用px这种非响应式的单位对你的网格项进行大小设置时，就有可能出现一种情况--你的网格大小可能小于其网格容器的大小。在这种情况下，你就可以设置网格容器内网格的对齐方式。此属性会将网格沿列轴进行对齐(相反于align-content属性定义的沿行轴对齐)。</p>
  <p>
    属性值:
    <Br/>
    start: 网格与网格容器的左端（顶端）对齐
    <Br/>
    end: 网格与网格容器的右端（低端）对齐
    <Br/>
    center: 网格处于网格容器的中间
    <Br/>
    stretch: 调整网格项的大小，使其宽度填充整个网格容器
    <Br/>
    space-around: 在网格项之间设置偶数个空格间隙，其最边缘间隙大小为中间空格间隙大小的一半
    <Br/>
    space-between: 在网格项之间设置偶数个空格间隙，其最边缘不存在空格间隙
    <Br/>
    space-evenly: 在网格项之间设置偶数个空格间隙，同样适用于最边缘区域
  </p>
  <p>
		.box {
    justify-content: start | end | center | stretch | space-around | space-between | space-evenly;
    }
	</p>
	<p>start：网格与网格容器的左端对齐</p>
	<div class="box">
		<div>
      <img src="../img/jcstart.PNG" alt="">
    </div>
	</div>

  <p>end: 网格与网格容器的右端对齐</p>
  <div class="box">
    <div>
      <img src="../img/jcend.PNG" alt="">
    </div>
  </div>

  <p> center: 网格处于网格容器的中间</p>
  <div class="box">
    <div>
      <img src="../img/jccenter.PNG" alt="">
    </div>
  </div>

  <p>stretch: 调整网格项的大小，使其宽度填充整个网格容器</p>
  <div class="box">
    <div>
      <img src="../img/jcstretch.PNG" alt="">
    </div>
  </div>

  <p>space-around：在网格项之间设置偶数个空格间隙，其最边缘间隙大小为中间空格间隙大小的一半。</p>
  <div class="box">
    <div>
      <img src="../img/jcspaceAround.PNG" alt="">
    </div>
  </div>

  <p>space-between: 在网格项之间设置偶数个空格间隙，其最边缘不存在空格间隙</p>
  <div class="box">
    <div>
      <img src="../img/jcspaceBetween.PNG" alt="">
    </div>
  </div>

  <p>space-evenly: 在网格项之间设置偶数个空格间隙，同样适用于最边缘区域</p>
  <div class="box">
    <div>
      <img src="../img/jcspaceEvenly.PNG" alt="">
    </div>
  </div>
  <p>align-content与justify-content效果基本一样，只是网格与网格容器是沿纵轴对齐排列</p>
	<h2>网格项属性</h2>
	<h3>1、grid-column-start/grid-column-end/grid-row-start/grid-row-end属性</h3>
	<p>使用特定的网格线确定网格项在网格内的位置。grid-column-start/grid-row-start 属性表示网格项的网格线的起始位置，grid-column-end/grid-row-end属性表示网格项的网格线的终止位置。</p>
	<p>属性值:可以是一个数字来引用相应编号的网格线，或者使用名称引用相应命名的网格线;
    <br>
  可以简写为：grid-column: 2 / 3;
    <br>
              grid-row: 2 / 3;
    <br>
  还可以简写为：grid-area：2/2/3/3;
  <p>
    实例中注意2在九宫格中的位置
    <br>
		.item {
    <br>
    grid-column-start: 2;  <br>
    grid-column-end: 3;  <br>
    grid-row-start: 2;  <br>
    grid-row-end: 3  <br>
		}
	</p>
	<div class="box box-10">
		<div class="box-item">1</div>
		<div class="box-item item">2</div>
		<div class="box-item">3</div>
		<div class="box-item">4</div>
    <div class="box-item">5</div>
    <div class="box-item">6</div>
    <div class="box-item">7</div>
    <div class="box-item">8</div>
    <div class="box-item">9</div>
	</div>

  <h3>2、justify-self/align-item属性</h3>
  <p>沿列轴对齐网格项中的内容(相反于align-item属性定义的沿行轴对齐)。此值适用于单一网格项中的内容。</p>
  <p>属性值:
    <br>
    start: 内容与网格区域的左端对齐<br>
    end: 内容与网格区域的右端对齐<br>
    center: 内容处于网格区域的中间位置<br>
    stretch: 内容宽度占据整个网格区域空间(默认值)
  <p>
    .item {
    <br>
    justify-self: start | end | center | stretch;
    }
  </p>
  <p>start：内容与网格区域的左端对齐</p>
  <div class="box">
    <div>
      <img src="../img/jsstart.PNG" alt="">
    </div>
  </div>

  <p>end: 内容与网格容器的右端对齐</p>
  <div class="box">
    <div>
      <img src="../img/jsend.PNG" alt="">
    </div>
  </div>

  <p> center: 内容处于网格区域的中间位置</p>
  <div class="box">
    <div>
      <img src="../img/jscenter.PNG" alt="">
    </div>
  </div>

  <p>stretch: 内容宽度占据整个网格区域空间(默认值)</p>
  <div class="box">
    <div>
      <img src="../img/jsstretch.PNG" alt="">
    </div>
  </div>
  <p>align-item效果与justify-self效果基本一样，只是内容与网格是沿纵轴对齐排列</p>
</body>
</html>
